<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- Typography CSS -->
    <link rel="stylesheet" th:href="@{/css/typography.css}">
    <!-- Style CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
</head>
   <body>
      <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
        <!-- Sign in Start -->
        <section class="sign-in-page">
            <div class="container sign-in-page-bg mt-5 p-0">
                <div class="row no-gutters">
                    <div class="col-md-6 text-center">
                        <div class="sign-in-detail text-white">
                            <!-- <a class="sign-in-logo mb-5" href="#"><img src="images/logo-white.png" class="img-fluid" alt="logo"></a> -->
                            <div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
                                <div class="item">
                                    <img th:src="@{/images/login/1.png}" class="img-fluid mb-4" alt="logo">
                                    <h4 class="mb-1 text-white">社区志愿服务进万家</h4>
                                    <p>自古以来邻里相亲，守望互助。但经济的发展的同时，带来了高楼，带来了优质的物业服务，却阻碍了社区成员的交流。造成了现在社区邻里之间相见而不相识常态。</p>
                                </div>
                                <div class="item">
                                    <img th:src="@{/images/login/2.png}" class="img-fluid mb-4" alt="logo">
                                    <h4 class="mb-1 text-white">社区志愿服务进万家</h4>
                                    <p>自古以来邻里相亲，守望互助。但经济的发展的同时，带来了高楼，带来了优质的物业服务，却阻碍了社区成员的交流。造成了现在社区邻里之间相见而不相识常态。</p>
                                </div>
                                <div class="item">
                                    <img th:src="@{/images/login/3.png}" class="img-fluid mb-4" alt="logo">
                                    <h4 class="mb-1 text-white">社区志愿服务进万家</h4>
                                    <p>自古以来邻里相亲，守望互助。但经济的发展的同时，带来了高楼，带来了优质的物业服务，却阻碍了社区成员的交流。造成了现在社区邻里之间相见而不相识常态。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 position-relative">
                        <div class="sign-in-from" id="userRegister">
                            <h1 class="mb-0">注册</h1>
                            <p v-show="msg == ''">请输入您的注册信息</p>
                            <p v-show="msg != ''" v-text="msg" style="color: red"></p>
                            <div class="mt-4">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">昵称</label>
                                    <input v-model="user.username" type="email" class="form-control mb-0" id="exampleInputEmail1" placeholder="请输入昵称">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail2">电话</label>
                                    <input v-model="user.userInfo.phone" type="email" class="form-control mb-0" id="exampleInputEmail2" placeholder="请输入电话">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">密码</label>
                                    <input v-model="user.password" type="password" class="form-control mb-0" id="exampleInputPassword1" placeholder="密码">
                                </div>
                                <div class="d-inline-block w-100">
                                    <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">
                                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                                        <span class="dark-color d-inline-block line-height-2">已经有账号了? <a th:href="@{/user/toLogin}">去登录</a></span>
                                    </div>
                                    <button type="button" @click="toRegister()" class="btn btn-primary float-right">注册</button>
                                </div>
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Sign in END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script th:src="@{/js/jquery.min.js}"></script>
      <script th:src="@{/js/popper.min.js}"></script>
      <script th:src="@{/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/js/waypoints.min.js}"></script>
      <script th:src="@{/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/js/smooth-scrollbar.js}"></script>
      <!-- lottie JavaScript -->
      <script th:src="@{/js/lottie.js}"></script>
      <!-- am core JavaScript -->
      <script th:src="@{/js/core.js}"></script>
      <!-- am charts JavaScript -->
      <script th:src="@{/js/charts.js}"></script>
      <!-- am animated JavaScript -->
      <script th:src="@{/js/animated.js}"></script>
      <!-- am kelly JavaScript -->
      <script th:src="@{/js/kelly.js}"></script>
      <!-- Flatpicker Js -->
      <script th:src="@{https://cdn.jsdelivr.net/npm/flatpickr}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/js/custom.js}"></script>

      <script th:src="@{/js/vue.js}"></script>
      <script th:src="@{/js/axio.js}"></script>
      <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>


      <script>
          new Vue({
              el:"#userRegister",
              data: {
                  user: {
                      userInfo:{},
                  },
                  msg: ""
              },
              methods:{
                  toRegister(){
                      // 发送ajax请求，尝试登录
                      let url = rootUrl+'user/register';
                      axios.post(url, this.user)
                          .then(response => {
                              let sdata = response.data;
                              if (sdata.code !== 0){
                                  this.msg = sdata.msg;
                                  return;
                              }

                              alert("注册成功");
                              location.replace(rootUrl + 'user/toLogin'); // 跳转页面
                          })
                          .catch(error => {
                              alert(error);
                          });
                  }

              }
          });
      </script>
   </body>
</html>